<!DOCTYPE html>
<html>
<head>
    <title>DeepSeek 聊天助手</title>
    <style>
        .container { max-width: 800px; margin: 0 auto; padding: 20px }
        #responseBox {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 200px;
            margin-top: 10px;
            white-space: pre-wrap;
        }
        textarea { width: 100%; height: 100px }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            margin-top: 10px
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>DoopSook 人工智障</h2>
        <textarea id="inputBox" placeholder="请输入您的问题..."></textarea>
        <button onclick="sendQuestion()">发送问题</button>
        <div id="responseBox"></div>
    </div>

    <script>
        async function sendQuestion() {
            const input = document.getElementById('inputBox').value;
            const responseBox = document.getElementById('responseBox');

            try {
                const response = await fetch('/chat', {  // 移除硬编码的localhost
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ question: input })
                });

                const data = await response.json();
                responseBox.textContent = data.answer;
            } catch (error) {
                responseBox.textContent = '请求失败：' + error.message;
            }
        }
    </script>
</body>
</html>